<template>
    <div>
      <el-form :model="resetPasswordForm" :rules="rules" class="login-container" label-position="left" label-width="0px" ref="resetPasswordForm">
        <h3>更新密码</h3>
        <el-form-item prop="oldPassword">
          <el-input type="password" v-model="resetPasswordForm.oldPassword" auto-complete="off" placeholder="旧密码"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input type="password" v-model="resetPasswordForm.newPassword" auto-complete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item prop="confirmNewPassword">
          <el-input type="password" v-model="resetPasswordForm.confirmNewPassword" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 30%">
          <el-button type="primary"  @click="handleResetPassword(resetPasswordForm.oldPassword,resetPasswordForm.newPassword)" style="width: 100%">提交更新</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
  name: 'SecuritySetting',
  data () {
    return {
      resetPasswordForm: {
        oldPassword: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'change' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'change' }
        ],
        confirmNewPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleResetPassword (oldPassword, newPassword) {
      this.$refs.resetPasswordForm.validate((valid) => {
        if (valid) {
          // console.log('success submit!')
          const userId = this.$store.getters.getCurrentUserId
          this.$axios.post('/users/password_reset',
            { userId, oldPassword, newPassword },
            { headers: { Authorization: this.$store.state.jwt } })
            .then(response => {
              this.$store.commit('REMOVE_INFO')
              this.$router.push('/login')
            })
        } else {
          return false
        }
      })
    },
    resetForm () {
      this.$refs.resetPasswordForm.resetFields()
    }
  }
}
</script>

<style scoped>
  .el-form-item {
    width: 60%;
  }
</style>
